<template>
	<!--  #ifdef  MP-WEIXIN -->
	<custom :back="true" title="书籍信息"></custom>
	<!--  #endif -->
	<view class="container"
		:style="{ '--height': `${safeAreaInsets?.bottom}px`,'backgroundImage':`url(${info.cover_img})` }">
		<!-- 书籍信息 -->

		<view class="book_cover" style="margin-top: 50px;">
			<image class="cover_img" :src="info.cover_img" lazy-load></image>
			<view class="book_name">
				<view class="book_name_del">{{ info.name }}</view>
				<!-- <view class="book_status_item_head">{{info.status == 1 ? "已完结" : "未完结"}}</view> -->
				<view class="book_author">{{ info.author }}</view>
				<view class="book_des">
					<view class="book_words">
						{{ info.novel_type_name }}
					</view>
					·
					<view class="book_words">
						{{info.status == 1 ? "完结" : "连载"}}
					</view>
					·
					<view class="book_words">
						{{info.words}}/字
					</view>
				</view>
				<!-- <view class="book_words">
					{{info.words}}/字
				</view> -->

				<view class="book_name_tail">
					{{ info.novel_type_name }}
				</view>
				<view class="book_name_tail" v-for="(item,index) in labelList" :key="index">
					{{ item }}
				</view>
			</view>
		</view>

		<div class="content">
			<!-- 简介 -->
			<view class="book_brief">
				<view class="book_brief_h2">简介<span>（长按三秒复制）</span></view>
				<!-- <view class="book_brief_cont" @touchstart="copyBrief(info.synopsis)" @touchend="copyDowm()"
					v-text="textContent">
				</view> -->
				<rich-text class="content" :nodes="textContent" :style="{'padding':'0'}"
					@touchstart="copyBrief(info.synopsis)" @touchend="copyDowm()"></rich-text>
			</view>
		</div>

		<!-- 猜你喜欢 -->
		<!-- <view class="book_like">
			<view class="book_like_h2"> 猜你喜欢 <span class="book_like_icon" @click="changeList()">换一换
					<image class="icon" src="/static/bookBar/loop.svg" lazy-load />
				</span></view>
			<view class="book_like_list">
				<view class="book_like_list_item" v-for="item in list" :key="item" @click="gotoBook(item.id)">
					<image class="cover_img" :src="item.cover_img" lazy-load></image>
					<view>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view> -->

		<!-- 底部按钮 -->
		<view class="footer">
			<view class="btns">
				<view class="btn_join">
					<view class="btn_icon" @click="_setBookshelfStatus(info)">
						<image class="icon"
							:src="info.bookshelfStatus == 1 ? '/static/bookBar/addBook.svg':'/static/bookBar/book.svg'"
							lazy-load mode="widthFix"></image>
						{{ info.bookshelfStatus == 1 ?"已在书架":"加入书架" }}
					</view>
				</view>
				<view class="btn_content">
					<view class="btn_resole" @click="gotoRead(true)">
						<!-- <image class="icon" src="/static/mp-toutiao/book.svg" lazy-load mode="widthFix"></image> -->
						<text>开始阅读</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 二次确认弹窗 -->
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { storeToRefs } from "pinia";
	import { useSystemStore } from "@/stores/system";
	import { setBookshelfStatus, novelLove } from "@/api/index";
	import { getNovelinfo, chapterrecores } from "@/api/toutiao";
	import { BookDetailsItem, ReadingBook } from "@/types/index";
	import { GetChapterFindispayParam } from "@/types/toutiaoApi";
	import { convertStringsToNumbers, formatNumberWithUnit } from "@/utils/index";

	var pressAndHoldTimer;
	const systemStore = useSystemStore();
	const { safeAreaInsets } = storeToRefs(systemStore);

	const infoParams = ref<GetChapterFindispayParam>(null);
	let list : ReadingBook = [];
	let labelList : ReadingBook = [];
	let showText : number = 0;
	let textContent : string = '';

	onLoad(async (params : GetChapterFindispayParam) => {
	
		infoParams.value = convertStringsToNumbers(params);
			
		try {
			const res = await chapterrecores(infoParams.value.novel_id);
			console.log('参数'+infoParams.value.goto )
			if(infoParams.value.goto){
				gotoRead(true);
				
			}
			infoParams.value.ChapterIndex =
				res?.ChapterIndex > -1 ? res?.ChapterIndex : 0;
			showText = 0;
			if (res?.ChapterIndex > -1) {
				// gotoRead(false);
				showText = 1;
			}
			
		} catch (e) {
			//TODO handle the exception
		}
	});

	const info = ref<BookDetailsItem>({});

	//跳转详情
	const gotoBook = async (id : string | number) => {
		if (!id) return;

		// #ifdef MP-WEIXIN
		uni.navigateTo({
			url: `plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=${id}&blockUnpaidScroll=1`,
		});
		// #endif

		// #ifndef MP-WEIXIN
		uni.navigateTo({
			url: `/pages/details/index?novel_id=${id}`,
		});
		// #endif
	};

	const _getNovelinfo = async () => {
		try {
			const res = await getNovelinfo(infoParams.value.novel_id);
			const resList = await novelLove({ novel_id: infoParams.value.novel_id });
			list = resList
			info.value = res || {};
			labelList = res.label.split(',')
			textContent = res.synopsis.split('\n').map((txt : string) => {
				return `<div class="item" style="text-indent: 2em;letter-spacing: 3px;font-size: 30rpx;color: rgb(124, 124, 124);text-align:30px;">${txt?.trim()}</div>`
			}).join('');
		} catch (e) {
			//TODO handle the exception
		}
	};

	onShow(() => {
		_getNovelinfo();
	});

	const _setBookshelfStatus = async (item : BookDetailsItem) => {
		// if (item.bookshelfStatus == 1) {

		// } else {
		try {
			const { bookshelfStatus } = await setBookshelfStatus({
				novel_id: item.id,
				bookshelfStatus: item.bookshelfStatus === 0 ? 1 : 0,
			});
			item.bookshelfStatus = bookshelfStatus;
		} catch (e) {
			//TODO handle the exception
		}

		// }
	};
	//
	const gotoRead = async (bool : boolean) => {
		try {
			if (bool) {
				const res = await chapterrecores(infoParams.value.novel_id);
				infoParams.value.ChapterIndex =
					res?.ChapterIndex > -1 ? res?.ChapterIndex : 0;
			}
			uni.navigateTo({
				url: `/pages/read/index?novel_id=${infoParams.value.novel_id}&ChapterIndex=${infoParams.value.ChapterIndex}&name=${info.value.name}`,
			});
		} catch (e) {
			//TODO handle the exception
		}
	};

	//复制到粘贴板
	const copyBrief = (data) => {
		//n秒后复制
		pressAndHoldTimer = setTimeout(function () {
			// 超过n秒后执行的代码
			console.log("Button held for 3 seconds!");
			uni.setClipboardData({
				data: data,
				success() {
					uni.showToast({
						title: "复制成功",
					});
				},
			});
			// 在这里调用你想要执行的函数
		}, 2000); // 1000毫秒等于1秒
	};
	//监听手指抬起
	const copyDowm = () => {
		// 删除监听器
		clearTimeout(pressAndHoldTimer);
	}

	//换一换
	const changeList = async () => {
		try {
			const resList = await novelLove({ novel_id: infoParams.value.novel_id });
			list = resList
		} catch (e) {
			//TODO handle the exception
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: var(--height);
	    padding: 0 20rpx 50px;
		background-color: #fff;

		.footer {
			position: relative;
			padding-top: -24rpx;
			height: 88rpx;
			bottom: 0;
			z-index: 5;

			.btns {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				margin: 0 -20rpx;
				padding: 24rpx 30rpx calc(var(--height) + 0.3rem);
				// height: 100%;
				background-color: #fff;
				@include line(top, $color: #dcdcdc);
				@include flex($align: center);
				flex-wrap: nowrap;
				justify-content: space-around;

				/* #ifdef MP-KUAISHOU */
				padding-bottom: 1rem;

				/* #endif */
				view {
					height: 100%;
					padding: 0.2rem;
				}

				.btn_join {
					background-color: rgb(242, 214, 157);
					width: 30%;
					text-align: center;
					border-radius: 50rpx;
					color: #000;
					padding: calc(0.2rem + 1px) 0;

					.btn_icon {
						display: flex;
						// flex-direction: column;
						align-items: center;
						flex-direction: row;
						justify-content: center;
						/* #ifndef MP-KUAISHOU */
						font-size: 0.8rem;
						/* #endif */

						/* #ifdef MP-KUAISHOU */
						font-size: 1rem;
						/* #endif */
					}

					.icon {
						@include size(1.2rem);
						margin-right: 16rpx;
					}
				}

				.btn_content {
					// background-image: linear-gradient(to bottom,
					// 		rgb(234, 155, 151),
					// 		rgb(244, 60, 56));
					background-color: rgb(92, 163, 146);
					width: 30%;
					text-align: center;
					border-radius: 50rpx;
					color: #fff;
					/* #ifndef MP-KUAISHOU */
					font-size: 0.9rem;
					padding: 0.2rem 0;
					/* #endif */

					/* #ifdef MP-KUAISHOU */
					font-size: 1rem;
					padding: 0.3rem 0;
					/* #endif */
					height: 100%;

					.btn_resole {
						height: 100%;
					}
				}
			}
		}

		.book {
			&_cover {
				// margin-top: 40rpx;
				// @include flex(center);
				// background-color: #000;
				/* #ifdef MP-KUAISHOU */
				height: 11rem;
				/* #endif */
				/* #ifndef MP-KUAISHOU */
				height: 9rem;
				/* #endif */
				display: flex;
				padding: 1rem 20rpx;
				// background-image: url();

				.cover_img {
					@include size(244rpx, 360rpx);
					height: 100%;
					width: 244rpx !important;
					margin-right: 30rpx;
					border-radius: 15rpx 10rpx 10rpx;
					object-fit: contain;
					z-index: 3;
				}

				.book_name {
					display: inline-block;
					// margin: 22rpx 0;
					font-size: 44rpx;
					width: 230px !important;
					z-index: 3;

					/* #ifdef MP-KUAISHOU */
					view {
						margin-bottom: 0.5rem;
					}

					.book_name_del {
						font-size: 1.2rem !important;
						font-weight: 600 !important;
					}

					.book_name_tail {
						width: auto !important;
						font-size: 1rem !important;
					}

					.book_des {
						font-size: 1rem !important;

						view {
							margin-bottom: 0;
						}
					}

					.book_author {
						font-size: 1rem !important;
					}

					/* #endif */
					.book_name_del {
						// text-overflow: ellipsis;
						// white-space: nowrap;
						// overflow: hidden;
						font-size: 1rem;
						font-weight: 400;
						display: -webkit-box;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						padding: 0 0.2rem;
					}

					.book_status_item_head {
						font-size: 30rpx;
						/* #ifndef MP-KUAISHOU */
						margin-top: 16rpx;
						/* #endif */
						color: rgb(160, 160, 160);
					}

					.book_author {
						font-size: 0.7rem;
						/* #ifndef MP-KUAISHOU */
						margin-top: 20rpx;
						/* #endif */
						color: rgb(96, 96, 96);
						padding: 0 0.2rem;
					}

					.book_des {
						display: flex;
						color: rgb(96, 96, 96);
						font-size: 0.7rem;
						align-items: center;
						height: 1.3rem;
					}

					.book_words {
						// font-size: 30rpx;
						// color: #ccc;
						padding: 0 0.2rem;
						/* #ifndef MP-KUAISHOU */
						margin-top: 10rpx;
						/* #endif */
						height: 100%;
					}

					.book_name_tail {
						display: inline-block;
						background-color: rgb(249, 249, 249);
						padding: 0.2rem 0.4rem;
						margin: 28rpx 5px 0 0;
						flex: left;
						color: rgb(148, 155, 173);
						font-size: 0.7rem;
						border-radius: 1rem;
						// width: 2rem;
						text-align: center;
						font-weight: bold;
						// font-family: cursive;
					}
				}
			}

			//简介
			&_brief {
				width: 100%;
				// height: 400rpx;
				// margin: 20rpx 0;

				&_h2 {
					margin-bottom: 20rpx;
					font-size: 40rpx;

					label {
						color: #ccc;
						font-size: 0.7em;
					}
				}

				.content {
					background-color: #fff;
					font-size: 30rpx;
					white-space: pre-line;
					color: rgb(124, 124, 124);
					/* #ifdef MP-KUAISHOU */
					line-height: 1.8rem;
					letter-spacing: 1px;
					/* #endif */

					/* #ifndef MP-KUAISHOU */
					line-height: 1.3rem;
					letter-spacing: 1px;

					/* #endif */
				}
			}

			//喜欢
			&_like {
				&_h2 {
					width: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 40rpx;

					.book_like_icon {
						height: 100%;
						display: flex;
						text-align: center;
						color: #ccc;
						align-items: center;
						font-size: 30rpx;

						.icon {
							width: 40rpx;
							display: inline-block;
							height: 40rpx;
						}
					}
				}

				&_list {
					margin-top: 30rpx;
					display: grid;
					width: 100%;
					grid-template-columns: 33% 33% 33%;

					&_item {
						// width: 47%;
						text-align: center;
						font-size: 35rpx;
						padding-bottom: 10rpx;
						margin-left: 10rpx;
						height: auto;

						// display: flex;
						view {
							width: 100px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						image {
							// width: auto;
							width: 100%;
							height: 9rem;
							object-fit: scale-down;
							// margin-bottom: 20rpx;
						}
					}
				}
			}


		}

		.content {
			background: #fff;
			padding: 1rem;
			// margin-top: 1rem;
			border-radius: 1rem 1rem 0 0;
			z-index: 3;
			height: 100%;
			flex: 1;
		}
	}


	.container:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(242, 236, 231, .9);
		z-index: 2;
		// filter: blur(10px);
	}
</style>